<%@page import="com.mycity.jsonops.PostOps"%>
<%@page import="com.mycity.dao.UserTab"%>
<%@page import="com.mycity.dao.PostTab"%>
<%
    UserTab user = (UserTab) session.getAttribute("user_info");
    PostTab[] posts = (PostTab[]) PostOps.getRecentPosts();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>My City Profile</title>
        <meta http-equiv="cache-control" content="no-cache" />
        <!-- Main style -->
        <link rel="stylesheet" href="/MyCityWeb/css/style.css" type="text/css" />
        <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.js"></script>

        <script>
            
            function upload(file) {
                
                var fd = new FormData();
                fd.append("image", file);
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "https://api.imgur.com/3/image", true);
                xhr.setRequestHeader("Authorization", "Client-ID e051bc3f4302dfe");
                xhr.onload = function() {
                var data=JSON.parse(xhr.responseText);

                    document.getElementById("id_photo").value = data.data.id;
                    document.getElementById("profilepic").setAttribute("src",data.data.link);
                };
                xhr.send(fd);

            }
        </script>
                 <script type="text/javascript">
$(function() {
  $("#tagsearch").suggest({
    key: "AIzaSyDIO2lbCrilTAPn9ZBIU1PL6n46FxnqgEw"
  }).bind("fb-select", function(e, data) {
      $("#tagsearch").val(data.name +"(" + data.notable.name + ")");
  });
});
</script>

    </head>

    <body class="direction-left">

        <!------ HEADER (BEGIN) ---------------------------->
        <div class='header'>
            <!-- HEADER MENU ICONS (BEGIN) -->
            <div class='menu' style='float: right; margin-right:10px; margin-left:1px;'>
                <a href="/MyCityWeb/home.jsp"><img src="/MyCityWeb/img/home.png" title='HOME' /></a>
            </div>
            <!-- HEADER MENU ICONS (END) -->

        </div>	
        <!------- HEADER (END) -------------------------------->

        <div class='result-panel'>
            <div class='result-right'>

                <!-- PROFILE -->

                <div class='question'>
                    <div class='userInfoQuestion' style='left:0px; width:100%'>                         
                        <span class='nameQuestion'>Profile of <%=user.getFirstname()+" "+user.getLastname()%></span>
                    </div>
                    <div class='question'>
                        <div class='question-icons'> 
                            <div id='3'>
                                <a id='like'><img class='like' src="/MyCityWeb/img/icons/users.png" /></a>
                            </div>    
                        </div>
                        <div class='answer'>

                            <form method='post' action='/MyCityWeb/User/addBio'>
                                <textarea class='answer' name="info"><%=user.getBio()%></textarea>
                                <input type="submit" id="subscribe-button" style='width:100%' value="Update" />
                            </form>

                        </div>
                    </div>
                </div>
                <!-- /PROFILE -->

                <div class='profile-img'>
                    <% if(user.getPic()==null){%>
                    <img id="profilepic" width="128px" height="128px" src='/MyCityWeb/img/male.png' style='' />
                    <%}else{%>
                    <img id="profilepic" width="128px" height="128px" src='http://i.imgur.com/<%=user.getPic()%>.jpg' style='' />
                    <%}%>
                </div>

                <!-- PROFILE -->
                <div class='question' style='min-height:200px; width:75%;'>
                    <div class='userInfoQuestion' style='left:0px; width:100%'>                         
                        <span class='nameQuestion'>Change Profile Photo</span>
                    </div>
                    <div class='question'>
                        <div class='question-icons'>
                            <a  id='like'><img class='like' src="/MyCityWeb/img/icons/upload.png"></a>
                        </div>
                        <div class='answer'>

                            <form method='get' action='/MyCityWeb/User/changeProfilePic'>
                                <input type='file' style='width:100%;' onchange="upload(this.files[0]);" style='display:none;' name='photo' />
                                <input type='text'  style='display:none;' name='photo_id' id="id_photo"/>
                                <input type="submit" id="subscribe-button" style='width:100%;' value="Save" />
                            </form>

                        </div>
                    </div>	
                </div>

            </div>

            <!-------- SIDEBAR (BEGIN) --------------------->

            <div class='result-left'>
                <div class='title'><span class='title'>RECENT POSTS</span></div>
                <ul class='dic-result'>	
                    <%
                        if (posts.length > 0) {
                            int count = Math.min(posts.length,3);
                            int idx=0;
                            for (int i=0;i<count;i++) {
                                out.print("<li><a href='/MyCityWeb/Post/view/" + posts[i].getPostId() + "'>");
                                out.print( posts[i].getPostContent() + "</br>Date:"
                                        + posts[i].getPostDate() + "</a></li>");
                                if(idx++==count)break;
                            }
                        } else {
                            out.print("No posts");
                        }
                    %>
                </ul>
            </div>

            <div class='result-left'>
                <div class='title'><span class='title'>SEARCH FOR TAGS</span></div>
                <div>
                    <form action='/MyCityWeb/Search/byTag/' method='post'>
                        <input type='text' name='searchtag'  id="tagsearch" autocomplete="off" placeholder='Enter a tag...' />
                        <input type='submit' class='city-search' value='SEARCH' />
                    </form>
                </div>
            </div>
            <!-------- SIDEBAR (END) --------------------->

        </div>

  
    </body>
</html>
